import { Carousel, WingBlank } from 'antd-mobile';
import React, { Component } from 'react';
import {SwiperWrap} from './CarouselStyled'
import car from '@a/images/carousel.jpg'
import index from '../../container/Frist';

export default class Car extends React.Component {
  state = {
    data: ['1', '2', '3'],
    imgHeight: 176,
  }
  componentDidMount() {
    // simulate img loading
    setTimeout(() => {
      this.setState({
        data: [car,car,car],
      });
    }, 100);
  }
  render() {
    return (
      <SwiperWrap>
          <Carousel
            dotActiveStyle={{width:'0.2rem',borderRadius:'0.04rem'}}
            autoplay={true}
            infinite
          >
            {this.state.data.map((val,index) => (
              <a
                key={index}
                href="#"
                style={{  display: 'inline-block', width: '100%', height: this.state.imgHeight, }}
              >
                <img
                  src={`${val}`}
                  alt=""
                  style={{  borderRadius:'0.1rem', width: '100%', verticalAlign: 'top',  }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </a>
            ))}
          </Carousel>
      </SwiperWrap>
    );
  }
}

